<div style="display: flex; justify-content: start; align-items: center">
  <ti-avatar id="avatar-style-1" style="margin-right: 5px; background-color: pink"></ti-avatar>
  <ti-avatar id="avatar-style-2" style="margin-right: 5px; color: #f56a00; background-color: #fde3cf" text="CD"></ti-avatar>
  <ti-avatar
    id="avatar-style-3"
    style="margin-right: 5px; background-color: hsla(17, 87%, 55%, 0.66); color: rgb(212, 194, 174)"
    text="深夜食堂"
  ></ti-avatar>
  <ti-avatar
    id="avatar-style-4"
    style="margin-right: 5px; font-family: serif; color: rgb(237, 202, 196); background-color: skyblue"
    shape="square"
    text="Bird"
    [imgSrc]="imgUrl"
  ></ti-avatar>
</div>
